<template>
	<div>
		<header class="header">
			<div class="header-top">
				<span>
					尚品汇欢迎您！ 请 <router-link to="/login">登录</router-link> |
					<router-link to="/login">免费注册</router-link>
				</span>
				<ul class="header-users">
					<li>我的订单</li>
					<li>我的购物车</li>
					<li>我的尚品汇</li>
					<li>尚品汇会员</li>
					<li>企业采购</li>
					<li>关注尚品汇</li>
					<li>合作招商</li>
					<li>商家后台</li>
				</ul>
			</div>
			<div class="header-logo">
				<router-link to="/login">
					<img src="./imgs/logo.png" alt="logo" />
				</router-link>
				<form class="header-logo-search">
					<input type="text" />
					<button>搜索</button>
				</form>
			</div>
		</header>
	</div>
</template>

<script lang="ts">
export default {
	name: "Header",
};
</script>

<script lang="ts" setup></script>

<style lang="less">
.header-top {
	padding: 10px 20px;
	background-color: #eee;
	display: flex;
	justify-content: space-between;
	.header-users {
		display: flex;
		justify-content: space-between;
		li {
			border-right: 1px solid #000;
			padding-right: 10px;
			margin-right: 10px;
			&:last-of-type {
				border-right: none;
				padding-right: 0;
				margin-right: 0;
			}
		}
	}
}
.header-logo {
  padding: 0 20px;
	display: flex;
	justify-content: space-between;
}
.header-logo-search {
	display: flex;
	align-items: center;
	input {
		width: 500px;
		height: 30px;
    padding: 0 10px;
    font-size: 14px;
    outline: none;
		border: 1px solid #f00;
		box-sizing: border-box;
	}
	button {
		width: 80px;
		height: 30px;
		border: none;
		color: white;
		background-color: #f00;
		cursor: pointer;
	}
}
</style>
